<template>
	<view class="content">
		<scroll-view
			:refresher-enabled="isUseRefresh"
			:refresher-threshold="100"
			refresher-default-style="black"
			:refresher-triggered="isFresh"
			refresher-background="#F2F2F2"
			@refresherrestore="onRestore"
			@refresherrefresh="scrollRefresh"
			@tap="changeIs"
			:enable-back-to-top="true"
			:show-scrollbar="false"
			:scroll-y="true"
			class="cola-message"
			:scroll-into-view="chatViewId"
		>
			<!-- <view v-for="(item, index) in msgData" :key="index" :id="'id-'+item.time" class="cola-message__msg"> -->
			<view
				v-for="(msgItem, msgIndex) in selfMsgData"
				:key="msgIndex"
				:id="'id-' + msgItem[IDType]"
				:style="{ 'flex-direction': msgItem[dataKeys['userId']] == userId ? 'row-reverse' : 'row' }"
				class="cola-message__msg__line"
			>
				<image class="cola-message__msg__line__photo" :src="msgItem[dataKeys['avator']]" mode=""></image>
				<view class="">
					<view
						v-if="msgItem[dataKeys['message']] !== ''"
						:class="[msgItem[dataKeys['userId']] == userId ? 'self-body' : 'other-body', msgItem[dataKeys['userId']] == userId ? 'msgBody-rg' : 'msgBody-lf']"
					>
						{{ msgItem[dataKeys['message']] }}
					</view>
					<view v-else :class="[msgItem[dataKeys['userId']] == userId ? 'self-body' : 'other-body', msgItem[dataKeys['userId']] == userId ? 'msgBody-rg' : 'msgBody-lf']">
						<image @tap="imgTap(msgItem[dataKeys['img']])" :src="msgItem[dataKeys['img']]" class="self-img" mode="aspectFit"></image>
					</view>
					<view class="c_9 font_22" :class="[msgItem[dataKeys['userId']] == userId ? 'msgTime-rg' : 'msgTime-lf']">{{ msgItem[dataKeys['time']] }}</view>
				</view>
				<view class="isRead"><!-- {{msgItem[dataKeys['read']]?'已读':'未读'}} --></view>
			</view>
			<!-- </view> -->
		</scroll-view>
		<view :style="{ bottom: (keybordMove ? '400' : '0') + 'rpx' }" class="bottom-keyboard">
			<view class="cola-keyboard">
				<!-- <image v-if="isUseVoice" src="" class="cola-keyboard__voice" mode=""></image> -->
				<!-- <u-icon size="40" name="mic"></u-icon> -->
				<image src="@/static/img2/my/refresh.png" mode="scaleToFill" style="width: 40rpx;height: 40rpx;" @tap="refreshBtn"></image>
				<view class="cola-keyboard__input"><u-input :focus="inputFocus" @tap="clickInput" @confirm="inputConfirm" :disabled="inputDisabled" v-model="text"></u-input></view>
				<!-- <image class="cola-keyboard__expression" src="" mode=""></image> -->
				<!-- <u-icon size="40" class="cola-keyboard__expression" name="star"></u-icon> -->
				<image src="@/static/img2/my/send.png" mode="scaleToFill" style="width: 40rpx;height: 40rpx;" @tap="inputConfirm"></image>
				<!-- <u-icon size="30" class="cola-keyboard__expression" name="arrow-upward" @tap="inputConfirm"></u-icon> -->
				<!-- <image class="cola-keyboard__more" src="" mode=""></image> -->
				<!-- <u-icon @tap="moreButton" size="30" class="cola-keyboard__more" name="plus-circle"></u-icon> -->
				<!-- <u-icon @tap="btnPhoto" size="30" class="cola-keyboard__more" name="photo"></u-icon> -->
				<image src="@/static/img2/my/photo.png" mode="scaleToFill" class="ml-1" style="width: 40rpx;height: 40rpx;" @tap="btnPhoto"></image>
			</view>
		</view>
		<view class="bottom-more" :style="{ height: (moreIsShow ? '400' : '0') + 'rpx' }">
			<view @tap="buttonClick(index)" v-for="(item, index) in moreFunction" :key="index" class="bottom-more__block">
				<view class="bottom-more__block__img">
					<image class="bottom-more__block__img__icon" v-if="item.img !== ''" src="" mode=""></image>
					<u-icon :size="iconSize" class="bottom-more__block__img__icon" v-else :name="item.icon"></u-icon>
				</view>
				<text>{{ item.name }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	/*
	 * 接收值：
	 * userId：用户的id
	 * userIdName：用户ID的键名
	 * IDType：设置要绑定的消息ID，滚动需要
	 * msgName：消息数据的绑定键名
	 * messageData：基础展示数据
	 * updateMsg：更新的数据，对象形式
	 * historyMsg：历史数据，对象或数组形式
	 * moreFunction：更多功能的显示，数组对象形式
	 * iconSize：图标显示大小，默认60rpx
	 * isUseRefresh：是否开启下拉刷新
	 *
	 *
	 * 数据：
	 * text：文本框输入内容
	 * chatViewId：如果超出当前屏幕，翻滚跟踪到最后一条
	 * inputFocus：光标是否集中
	 * inputDisabled：是否禁止使用输入框
	 * TODO 没有语音输入
	 * isUseVoice：是否使用语音输入
	 * selfMsgData：内部的数据保存
	 * moreIsShow：是否显示更多功能
	 * keybordMove：输入框键盘动画
	 * isFresh：是否触发下拉刷新
	 *
	 *
	 * 功能：
	 * moreClick：更多功能的点击项
	 * sendMsg：发送消息
	 */
	props: {
		isUseRead: {
			type: Boolean,
			default: false
		},
		dataKeys: {
			type: Object,
			default: () => ({
				userId: 'userId',
				msgId: 'msgId',
				name: 'name',
				message: 'message',
				img: 'img',
				avator: 'avator',
				read: 'read',
				time: 'time'
			})
		},
		userId: {
			type: String || Number,
			default: ''
		},
		// 已废弃
		userIdName: {
			type: String
		},
		IDType: {
			type: String,
			default: 'id'
		},
		msgName: {
			type: String,
			default: 'message'
		},
		messageData: {
			type: Array,
			default: () => []
		},
		updateMsg: {
			type: Object,
			default: () => {}
		},
		historyMsg: {
			type: [Object, Array],
			default: () => {}
		},
		moreFunction: {
			type: Array,
			default: () => [
				{
					name: '照片',
					icon: 'photo',
					img: ''
				},
				{
					name: '拍摄',
					icon: 'camera',
					img: ''
				}
			]
		},
		iconSize: {
			type: String,
			default: '60'
		},
		isUseRefresh: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			text: '',
			chatViewId: '',
			inputFocus: false,
			inputDisabled: false,
			isUseVoice: true,
			selfMsgData: [],
			moreIsShow: false,
			keybordMove: false,
			isFresh: false,
			freshing: false
		};
	},
	mounted() {
		/*
		userId:'101',
		msgId: Math.random().toFixed(4)*10000,
		name: '我的大聪明啊',
		message: '',
		img:'https://iknow-pic.cdn.bcebos.com/d833c895d143ad4bb4400a7d8c025aafa40f0624',
		avator: ''
		*/
		this.selfMsgData = this.fixSelfData(JSON.parse(JSON.stringify(this.messageData)));
	},
	watch: {
		messageData: {
			handler(val, oldVal) {
				if (val === oldVal) {
					return;
				}
				const valueType = Object.prototype.toString.call(val);
				// val = val.reverse()
				val = this.fixSelfData(val);
				const len = val.length;
				let num = len - 1;
				for (num; num >= 0; num--) {
					this.selfMsgData.push(val[num]);
				}
				setTimeout(() => {
					this.setScroll();
				}, 300);
			},
			// immediate:true,
			deep: true
		},
		updateMsg: {
			handler(val) {
				if (Object.keys(val) === 0) {
					return;
				}
				this.selfMsgData.push(this.fixSelfData(val));
				this.setScroll();
			},
			// immediate:true,
			deep: true
		},
		historyMsg: {
			handler(val, oldVal) {
				if (val === oldVal) {
					return;
				}
				setTimeout(() => {
					this.isFresh = false;
					this.freshing = false;
				}, 500);
				const valueType = Object.prototype.toString.call(val);
				if (valueType === '[object Object]') {
					this.selfMsgData.unshift(val);
				} else if (valueType === '[object Array]') {
					// val = val.reverse()
					val = this.fixSelfData(val);
					const len = val.length;
					let num = 0;
					for (num; num < len; num++) {
						this.selfMsgData.unshift(val[num]);
					}
					setTimeout(() => {
						this.setScroll();
					}, 300);
				}
			},
			immediate: true,
			deep: true
		},
		isUseRefresh: {
			handler(val, oldVal) {
				if (val == false) {
					this.freshing = false;
					this.isFresh = false;
				}
			}
		}
	},
	methods: {
		scrollRefresh(e) {
			if (this.freshing) return;
			this.freshing = true;
			this.isFresh = true;
			this.$emit('refresh', e);
		},
		onRestore() {
			this.isFresh = 'restore';
		},
		changeIs() {
			this.moreIsShow = false;
			this.keybordMove = false;
		},
		voiceLong() {
			console.log('录音');
		},
		clickInput() {
			this.inputFocus = false;
		},
		inputConfirm() {
			if (this.text === '') {
				return;
			}
			this.inputFocus = false;
			this.$emit('sendMsg', this.text);
			this.text = '';
			// this.inputFocus = true;
		},
		setScroll() {
			let len = this.selfMsgData.length - 1;
			console.log('');
			const id = this.selfMsgData[len][this.IDType];
			// 我这里的id的设置规则是自己想的
			// 只要不会重复 并且不事纯number就行
			this.chatViewId = 'id-' + id;
			// #ifdef H5
			uni.pageScrollTo({
				selector: '#' + this.chatViewId
			});
			// #endif
		},
		imgTap(img) {
			uni.previewImage({
				urls: [img],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		moreButton() {
			uni.hideKeyboard();
			this.keybordMove = true;
			this.moreIsShow = true;
		},
		buttonClick(index) {
			this.$emit('moreClick', index);
		},
		btnPhoto() {
			this.$emit('btnPhoto');
		},
		// 刷新数据
		refreshBtn() {
			this.$emit('refreshBtn');
		},
		fixSelfData(arr) {
			let keyArr = Object.keys(this.dataKeys);
			let valueArr = Object.values(this.dataKeys);
			const valueType = Object.prototype.toString.call(arr);
			if (valueType === '[object Object]') {
				let resultObj = {};
				keyArr.forEach((keyItem, keyIndex) => {
					resultObj[valueArr[keyIndex]] = arr[valueArr[keyIndex]];
				});
				return resultObj;
			} else if (valueType === '[object Array]') {
				let resultArr = [];
				arr.forEach((item, index) => {
					let resultObj = {};
					keyArr.forEach((keyItem, keyIndex) => {
						resultObj[valueArr[keyIndex]] = item[valueArr[keyIndex]];
					});
					resultArr.push(resultObj);
				});
				return resultArr;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.self-body {
	color: #fff;
	background-color: #19be6b;
}
.other-body {
	color: #000000;
	background-color: #fff;
}
@mixin msgBody {
	// width: 62%;
	padding: 15rpx;
	margin: 0 30rpx;
	border-radius: 10rpx;
	position: relative;
	word-spacing: normal;
	word-break: break-all;
	word-wrap: break-word;
}
@mixin msgTime {
	max-width: 100%;
	padding: 10rpx 0;
	position: relative;
	// word-spacing: normal;
	// word-break:break-all;
	// word-wrap:break-word;
}
.content {
	width: 100vw;
	height: 100vh;
	.cola-message {
		width: 100%;
		height: calc(100vh - 140rpx);
		padding: 30rpx;
		background-color: #f2f2f2;
		box-sizing: border-box;
		&__msg {
			width: 100%;
			min-height: 40rpx;
			&__line {
				width: 100%;
				display: flex;
				align-items: flex-start;
				position: relative;
				&:nth-child(n + 2) {
					margin-top: 40rpx;
				}
				.self-img {
					// width: 100%;
					max-width: 340rpx;
					height: 260rpx;
					// margin: 0 30rpx;
					border-radius: 10rpx;
					// border-radius: 50%;
				}
				&__photo {
					width: 100rpx;
					height: 100rpx;
					// background-color: red;
					border-radius: 50%;
				}
				.msgBody-lf {
					@include msgBody();
					align-self: flex-start;
					// float: left;
					&::before {
						position: absolute;
						content: '';
						width: 0;
						height: 0;
						overflow: hidden;
						border: 15rpx solid transparent;
						border-right-color: #fff;
						left: -26rpx;
						top: 20rpx;
					}
				}
				.msgBody-rg {
					@include msgBody();
					align-self: flex-end;
					// float: right;
					&::before {
						position: absolute;
						content: '';
						width: 0;
						height: 0;
						overflow: hidden;
						border: 15rpx solid transparent;
						border-left-color: #19be6b;
						right: -26rpx;
						top: 20rpx;
					}
				}
				.msgTime-lf {
					@include msgTime();
					align-self: flex-start;
					text-align: left;
					// float: left;
					transform: translateX(15px);
				}
				.msgTime-rg {
					@include msgTime();
					align-self: flex-end;
					text-align: right;
					// float: right;
					transform: translateX(-16px);
				}
				.isRead {
					font-size: 24rpx;
					color: #b2b2b2;
				}
				.noRead {
					font-size: 24rpx;
					color: #00bc43;
				}
			}
		}
	}
	.bottom-keyboard {
		width: 100%;
		min-height: 140rpx;
		padding: 30rpx 30rpx 0 30rpx;
		padding-bottom: constant(safe-area-inset-bottom); // 核心代码
		padding-bottom: env(safe-area-inset-bottom); // 核心代码
		background-color: #efefef;
		border-top: 1px solid #dedede;
		position: fixed;
		bottom: 0;
		left: 0;
		transition: bottom 0.5s;
		z-index: 99;
		.cola-keyboard {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			&__voice {
				width: 60rpx;
				height: 60rpx;
				background-color: blue;
			}
			&__input {
				// margin-left: 30rpx;
				height: 100%;
				width: 75%;
				// width: 65%;
				// padding: 0 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				box-sizing: border-box;
			}
			&__expression {
				// width: 60rpx;
				// height: 60rpx;
				// margin-left: 30rpx;
			}
			&__more {
				// width: 60rpx;
				// height: 60rpx;
				// margin-left: 30rpx;
			}
		}
	}
	.bottom-more {
		width: 100%;
		padding: 0 30rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		transition: height 0.5s;
		background-color: #f6f6f6;
		&__block {
			width: 120rpx;
			height: 200rpx;
			margin-top: 5rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			&:nth-child(n + 2) {
				margin: 5rpx 0 0 32rpx;
			}
			&__img {
				width: 120rpx;
				height: 120rpx;
				line-height: 150rpx;
				text-align: center;
				background-color: #fff;
				border-radius: 20rpx;
			}
			text {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #848588;
			}
		}
		&::after {
			display: block;
			content: '';
			flex: 1;
		}
	}
}
</style>
